<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Vue.js模板语法和条件语句</title>
    <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
</head>
<body>
    <div id="app">
<!--        v-if指令根据表达式seen的值（true或者false）来决定是否插入p元素-->
        <p v-if="seen">now you see me again</p>
        <template v-if="ok">
            <h1>www.runoob.com</h1>
            <p>What we learned was not only technology but also our dreams!</p>
            <p>Keep going</p>
        </template>
    </div>
    <script>
        new Vue({
            el:'#app',
            data:{
                seen:true,
                ok:true
            }
        })
    </script>

    <div id="app-plus">
<!--        给if条件添加一个else条件-->
        <div v-if="Math.random()>0.5">
            Sorry
        </div>
        <div v-else>
            Not sorry
        </div>
    </div>
    <script>
        new Vue({
            el:'#app-plus'
        })
    </script>

    <div id="app-plus2">
<!--        v-else-if,链式条件，类似else if-->
<!--        注意：v-else、v-else-if必须跟在v-if或者v-else-if之后-->
        <div v-if="type === 'A'">
            A
        </div>
        <div v-else-if="type === 'B'">
            B
        </div>
        <div v-else-if="type === 'C'">
            C
        </div>
        <div v-else>
            Not A/B/C
        </div>
    </div>

    <script>
        new Vue({
            el: '#app-plus2',
            data: {
                type: 'D'
            }
        })
    </script>



    <div id="app-something else">
<!--        使用v-show指令来根据条件展示元素-->
        <h1 v-show="ok">Hello!</h1>
        <h1 v-show="ok2">Hello!</h1>
    </div>
    <script>
        new Vue({
            el: '#app-something else',
            data: {
                ok: true,
                ok2:false
            }
        })
    </script>



    <div id="app2">
<!--        v-html指令输出-->
        <div v-html="message"></div>
    </div>
    <script>
        new Vue({
            el:'#app2',
            data:{
                message:'<h1>这是使用v-html指令输出的message的赋值</h1>'
            }
        })
    </script>




    <div id="app3">
<!--        参数的使用，参数在指令后面以冒号指明。
            例如：v-bind指令用来响应地更新HTML属性
            此处的href是参数，告知v-bind指令将该元素的href属性与表达式url的值绑定-->
        <pre><a v-bind:href="url">菜鸟教程</a></pre>
        <pre><a :href="url">菜鸟教程</a></pre>
    </div>
    <script>
        new Vue({
            el:'#app3',
            data:{
                url:'http://www.runoob.com'
            }
        })
    </script>




    <div id="app4">
<!--        在input输入框中使用v-model指令来实现双向数据绑定-->
<!--        v-model指令用来在input、select、textarea、checkbox、radio等表单控件元素上创建双向数据绑定，
            根据表单上的值，自动更新绑定的元素的值。-->
        <p>{{message}}</p>
        <input v-model="message">
    </div>
    <script>
        new Vue({
            el:'#app4',
            data:{
                message:'尝试通过输入框改变我的值'
            }
        })
    </script>




    <div id="app5">
<!--        按钮的事件可以用v-on指令监听事件，并对用户的输入进行响应-->
        <p>{{message}}</p>
        <button v-on:click="reverseMessage">反转字符串</button>
        <button @click="reverseMessage">反转字符串</button>
    </div>
    <script>
        new Vue({
            el:'#app5',
            data:{
                message:'奔跑吧！骄傲的少年，年轻的心里面，是坚定的信念！'
            },
            methods:{
                reverseMessage:function (){
                    this.message = this.message.split('').reverse().join('')
                    // split('') 会把数据拆分为一个数组，括号里的 '' 是把数据拆分为每个字符串的意思，如果不用就不会拆分成每个字符串。
                    // reverse() 是翻转的意思，把数据反过来，跟在split('')后面使用。
                    // join('') 是重组的意思，把数组合成一个字符串。
                }
            }
        })
    </script>



    <div id="app6">
<!--        自定义过滤器-->
        <h1>{{message | capitalize}}</h1>
<!--        过滤器可以串联：-->
<!--        {{message | filterA |filterB}}-->
    </div>
    <script>
        new Vue({
            el:'#app6',
            data:{
                message:'Runoob'
            },
            filters:{
                capitalize:function (value){
                    if (!value) return ''
                    value = value.toString()
                    return value.charAt(0).toUpperCase()+value.slice(1)
                }
            }
        })
    </script>


<!--Vue.js为两个最为常用的指令提供了特别的缩写：
          v-bind:href="url"     :href="url"
          v-on:click="do Something"      @click="do Something"-->
</body>
</html>